<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--<link rel="stylesheet" type="text/css" href="css/jgg.css"/>-->
		<link rel="stylesheet" type="text/css" href="css/gg.css"/>
		<title></title>
	</head>
	<body>
		<div class="web">
		<audio src="audio/Children´s Christmas Favorites - Jingle Bells (Album Version) 00_00_04-00_00_41.mp3" autoplay="autoplay" id="audio"></audio>
		<header>
			<div class="logo2">
				<img src="img/jgg/logo2.png"/>
			</div>
			<div class="sm" id="sm">
			<img src="img/gongxi/shuoming.png"/>
		</div>
		<div class="yy tran" id="yy">
			<img src="img/gongxi/yinyue.png"/>
		</div>
			
		</header>
		
		<section>
			
			<div class="cj" id="container">
				<ul id="ul">
					<li>
						<img src="img/jgg/mj_02.png"/>
					</li>
					<li>
						<img src="img/jgg/jz_03.png"/>
					</li>
					<li>
						<img src="img/jgg/yhj_03.png"/>
					</li>
					<li id="li4">
						<img src="img/jgg/np_06.png"/>
					</li>
					
					<div class="aa" id="aa">
						<div class="kaishi">
							<img src="img/jgg/kaisi.png"/>
						</div>
						<div class="btn">
							<img src="img/jgg/btn.png"/>
						</div>
					</div>
					
					<li id="li6">
						<img src="img/jgg/alz_06.png"/>
					</li>
					<li>
						<img src="img/jgg/trt_11.png"/>
					</li>
					<li>
						<img src="img/jgg/mianmo_13.png"/>
					</li>
					<li>
						<img src="img/jgg/jy_15.png" />
					</li>
				</ul>
			</div>
			
		</section>
		
		
		
		<div class="gongxi" id="gongxi">
			<h2>恭喜中奖了</h2>
			<div class="zj">
				<img src="img/gongxi/zj.png"/>
				
			</div>
			
			<a id="duijiang">马上兑奖</a>
		</div>
		
		
		<div class="shuoming" id="shuoming">
			<div class="close" id="close">
					<img src="img/shuoming/close.png" />
				</div>

				<div class="info">
					
					<h2>规则说明</h2>
					<p>1. 每个ID只有1次抽奖机会，100%中奖。</p>
					<p>2.中奖后，请与哔帮小秘书联系，告知奖品收货地址，我们将会在活动结束48小时内送出。</p>
					<p>3.所有奖品免费领取，奖品的快速由消费者承担，如果没有与小秘书特别说明，我们默认以顺丰到付的形式寄出。</p>
					<h3>活动最终解析权归广州顺代邦网络科技有限公司所有</h3>
					
					
					<div class="logo3">
					<img src="img/shuoming/logo3.png"/>
					</div>
				</div>
			
			
		</div>
		
		
		<div class="tanchuang" id="tanchuang">
			<div class="close" id="close1">
					<img src="img/shuoming/close.png" />
			</div>
			
			<div class="info">
				<p>恭喜你抽到</p>
				<p>请与哔帮小秘书联系, 核实收货地址</p>
				
				<div class="box"></div>
				
				<h3>小秘书二维码</h3>
				<div class="logo">
					<img src="img/shuoming/logo3.png"/>
				</div>
			</div>
			
		</div>
		
		
		
			</div>
		
		
		
		<script type="text/javascript">
			document.body.style.height = window.innerHeight + "px";
			
			var shuoming = document.getElementById("shuoming");
			var close = document.getElementById("close");
			var sm = document.getElementById("sm");
			var tanchuang = document.getElementById("tanchuang");
			var duijiang = document.getElementById("duijiang");
			var close1 = document.getElementById("close1");
			close.onclick = function(){
				shuoming.style.display="none";
//				container.style.display="block";
		
			}
			close1.onclick = function(){
//				tanchuang.style.display="none";
				location.href="jgg.html";
		
			}
			sm.onclick = function(){
				shuoming.style.display="block";
			}
			duijiang.onclick = function(){
				tanchuang.style.display="block";
			}
			
			
			
			var Audio = document.getElementById("audio");
			var yy = document.getElementById("yy");
			var zj=document.querySelector('.zj');
			var a=true;
			yy.onclick = function(){
				//console.log(Audio.pause())
				
				if(a){
					Audio.pause();
					a=false;
					
					yy.classList.remove("tran");
					
				}else{
					Audio.play();
					a=true;
					yy.classList.add("tran");
				}
				
			}
			
			
			
			var container = document.getElementById("container");
			
			var oUl = container.getElementsByTagName("ul")[0];
			var oLi = oUl.getElementsByTagName("li");
			
			var oA = document.getElementById("aa");
			
			var gongxi = document.getElementById("gongxi");
			
//			for(var i=0;i<oLi.length;i++){
//				(function(i){
//					oLi[i].setAttribute('data-index',i);
//				})(i)
//			}
			timer = null;
			
			function start(){
				
				
				var i = 0;
				var num = Math.floor(Math.random()*oLi.length + 20);
				if(i<num){
//					clearInterval(timer);
					timer = setInterval(function(){
						
						for(var j=0; j<oLi.length; j++){
							oLi[j].className='';
						}
						oLi[i%oLi.length].classList.add("active");
						console.log(i)
						i++;
						if(i===num){
							
							clearInterval(timer); 
//							setTimeout(function(){
//								alert("恭喜你中奖了");
								console.log(i,num)
								var aaa=(i-1)%oLi.length;
//								
								
								
								gongxi.style.display="block";
								
								
								zj.getElementsByTagName('img')[0].src=oLi[aaa].getElementsByTagName('img')[0].src;
								
								
//							},100)
							
							
						}
					},150)
				}
			}
			
			
			
			oA.onclick = function(){
				start();
			}
			
			
			
		</script>
		<script src="js/Recalc.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

